<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      transitionName: 'slide-right'
    }
  },
  watch: {
    '$route'(to, from) {
      const toDepth = to.path.split('/').length
      const fromDepth = from.path.split('/').length
      this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
    }
  }
}

</script>


<style lang="scss">
/* 左侧离场，右侧入场 动画 */
.slide-left-leave {
  transform: translate(0, 0);
}

.slide-left-leave-active,
.slide-left-enter-active {
  transition: all 0.7s;
  /* 为了保证组件切换动画时，两个组件重叠显示，在动画持续时间将做动画的组件根元素设置为绝对行为 */
  position: absolute;
}

.slide-left-leave-to {
  transform: translate(-100%, 0);
}

.slide-left-enter {
  transform: translate(100%, 0);
}

.slide-left-enter-to {
  transform: translate(0, 0);
}

/* 右侧离场，左侧入场 动画 */
.slide-right-leave {
  transform: translate(0, 0);
}

.slide-right-leave-active,
.slide-right-enter-active {
  transition: all 0.7s;
  position: absolute;
}

.slide-right-leave-to {
  transform: translate(100%, 0);
}

.slide-right-enter {
  transform: translate(-100%, 0);
}

.slide-right-enter-to {
  transform: translate(0, 0);
}
</style>
